<!--
 * @Author: your name
 * @Date: 2020-07-27 12:27:04
 * @LastEditTime: 2020-08-23 19:16:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit  参考 https://blog.csdn.net/u010559460/article/details/104728212/
 * @FilePath: \ryfront\src\components\Login.vue
--> 
<template>
    <div class="login_container">
    <div class="login_box" >
        <!-- 登录表单区域 -->
        <p style="font-size: 20px;color: #ffffff;text-align:center;" >用户登录</p>
        <el-form size="mini" ref="form" :rules="rules" :model="user"  >
        <!-- 用户名 -->
            <el-form-item prop="userAccount">
            <el-input placeholder="用户名" v-model="user.userAccount" ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="userPassword">
                <el-input placeholder="密码" v-model="user.userPassword" show-password></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="validcode">
                <el-input class="code" v-model="user.validcode" placeholder="验证码"></el-input>
                <a>
                    <img />
                </a>
            </el-form-item>
            <!-- 记住我 -->
            <el-form-item>
                <el-checkbox label="记住我" v-model="user.rememberMe" class="rememberMe"></el-checkbox>
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="login" >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
        <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
        style="height:100%"
    >
    </vue-particles>
  </div>

</template>

<script>
import {userLogin} from '@/api'
import axios from 'axios'

export default {
    name: 'login',
    data(){
        return {
            user: {
                userAccount:'',
                userPassword:'',
                rememberMe: false,
                validcode: '',
            },
            rules: {
                userAccount: [{required: true, message: '请输入用户账户', trigger: 'blur'}],
                userPassword: [{required: true, message: '请输入密码', trigger: 'blur'}],
                validcode:[{required: true, message: '请输入验证码', trigger: 'blur'}],
            },
            loading: false,
        }
    },
    methods:{
        login:function(){
            this.loading = true;
            let _this = this;
            this.$refs["form"].validate((valid)=>{
                this.loading = false;
                if(valid) {
                    userLogin(this.user).then((result) => {
                       let data = result.data;
                       if(data.code == 200){
                           //保存token和用户账户 到 localStorage
                            localStorage.setItem("token",data.data.token);
                            localStorage.setItem("nowUser",data.data.nowUser);

                            axios.defaults.headers.common['Authorization'] =  "Bearer " +localStorage.getItem("token");

                            this.$message({
                                message: '登录成功!',
                                type: 'success',
                                duration: 2000,
                            });
                            _this.$router.push("/index");
                            
                       }else{
                           this.$message.error("用户名或密码错误!");
                       }
                    });
                }else{
                    return false;
                }
            })
        }
    }

}
</script>

<style scoped>

.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.login_box {
  width: 290px;
  height: 350px;
  /* background-color: #fff; */
  background-color: #2e527bb3;
  border-radius: 5px;
 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.el-form {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
.code {
  width: 45%;
}
img {
  /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
  display: line-inline;
  width: 45%;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}
.rememberMe {
  color: #fff;
}

</style>
